import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';
import Signup from '../components/Signup.vue';
import Layout from '../components/Layout.vue';
import StaffLayout from '../components/StaffLayout.vue';
import ReimbursementRecords from '../components/ReimbursementRecords.vue';
import UserProfile from '../components/UserProfile.vue';
import MedicalInsuranceApplication from '../components/MedicalInsuranceApplication.vue';
import MedicalApproval from '../components/MedicalApproval.vue';
import StaffReimbursementRecord from '../components/StaffReimbursementRecord.vue';
import MedicalBasicInfo from '../components/MedicalBasicInfo.vue';
import UserManage from '../components/UserManage.vue';
import MedicalStaff from '../components/MedicalStaff.vue';
import InsuredPersonManage from '../components/InsuredPersonManage.vue';
import MedicalInstitution from '../components/MedicalInstitution.vue';
import MedicalService from '../components/MedicalService.vue';
import PendingReimbursement from '../components/PendingReimbursement.vue';
import AllMedicalService from '../components/AllMedicalService.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    props: true,
  },
  {
    path: '/signup/',
    name: 'Signup',
    component: Signup,
    props: true,
  },
  {
    path: '/layout/:username',
    name: 'Layout',
    component: Layout,
    props: true,
  },
  {
    path: '/reimbursement-records/:username',
    name: 'ReimbursementRecords',
    component: ReimbursementRecords,
    props: true,
  },
  {
    path: '/user-profile/:username',
    name: 'UserProfile',
    component: UserProfile,
    props: true,
  },
  {
    path: '/MedicalInsurance-Application/:username',
    name: 'MedicalInsuranceApplication',
    component: MedicalInsuranceApplication,
    props: true,
  },
  {
    path:'/StaffLayout/:username',
    name: 'StaffLayout',
    component: StaffLayout,
    props: true,
  },
  {
    path: '/MedicalApproval/:username',
    name: 'MedicalApproval',
    component: MedicalApproval,
    props: true,
  },
  {
    path: '/Staff-ReimbursementRecords/:username',
    name: 'StaffReimbursementRecord',
    component: StaffReimbursementRecord,
    props: true,
  },
  {
    path: '/MedicalBasicInfo/:username',
    name: 'MedicalBasicInfo',
    component: MedicalBasicInfo,
    props: true,
  },
  {
    path: '/UserManage/:username',
    name: 'UserManage',
    component: UserManage,
    props: true,
  },
  {
    path: '/MedicalStaff/:username',
    name: 'MedicalStaff',
    component: MedicalStaff,
    props: true,
  },
  {
    path:'/InsuredPersonManage/:username',
    name: 'InsuredPersonManage',
    component: InsuredPersonManage,
    props: true,
  },
  {
    path:'/MedicalInstitution/:username',
    name: 'MedicalInstitution',
    component: MedicalInstitution,
    props: true,
  },
  {
    path: '/MedicalService/:username',
    name: 'MedicalService',
    component: MedicalService,
    props: true,
  },
  {
    path: '/PendingReimbursementRecords',
    name: 'PendingReimbursementRecords',
    component: PendingReimbursement,
    props: true,
  },
  {
    path: '/AllMedicalService',
    name: 'AllMedicalService',
    component: AllMedicalService,
    props: true,
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
